<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Before&&After</title>

    <style type="text/css">
        h1::before {
            content: 'IT在线教育平台';
        }

        ul {
            list-style: none;
        }

        ul li::before {
            content: '';
            width: 4px;
            height: 4px;
            background: #c00;
            display: inline-block;
        }

        .out {
            width: 1000px;
            border: 1px solid red;
        }

        .out .box {
            width: 200px;
            height: 200px;
            background: green;
            float: left;
        }

        .out::after {
            content: '';
            clear: both;
            display: block;
        }
    </style>
</head>
<body>

<div class="out">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<h1>极客学院</h1>

<ul>
    <li>IT在线教育平台</li>
    <li>IT在线教育平台</li>
    <li>IT在线教育平台</li>
    <li>IT在线教育平台</li>
    <li>IT在线教育平台</li>
</ul>
</body>
</html>